<template>
	<view>
		<scroll-view scroll-y="true" class="scroll_box" :style="{height:swiperHeight+'px'}">
			<view class="order_list" v-for="(allItem,allIndex) in 6" :key='allIndex'>
				<view class="order_list_content">
					<image src="/static/1018.png" mode=""></image>
					<view class="content_txt">
						<view class="content_txt_top">
							<text class="top_people">雇佣师傅：李三</text>
							<text>退款成功</text>
						</view>
						<view class="content_txt_bottom">
							<text>施工时间：9月5日 至 9月6日 </text>
						</view>
						<view class="content_txt_bottom">
							<text>工种：水电、开锁、水电</text>
						</view>
					</view>
				</view>
				<view class="order_list_button">
					<view class="button_style_other" @tap='lookDetails'>
						<text>查看详情</text>
					</view>
					<!-- <view class="button_style_other" @tap='lookDetails'>
						<text>售后中</text>
					</view> -->
					<!-- <view class="button_style_none" @tap='lookDetails'>
						<text class="other_txt">售后结束</text>
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight:'',
				
			};
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					this.swiperHeight = res.windowHeight
				}
			})
		},
		methods:{
			lookDetails(){
				uni.navigateTo({
					url:'./refundDetails/refundDetails'
				})
			}
			
		}
	}
</script>

<style lang="scss">

.scroll_box{
		width: 100%;
		background-color: #f4f8fb;
		padding: 20rpx 12rpx 0 12rpx;
		box-sizing: border-box;
}
.placStyle{
	color: #888888;
	font-size: 24rpx;
}
.order_list{
	width: 100%;
	height: 332rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 34rpx 19rpx 0 19rpx;
	margin-bottom: 20rpx;
	&_content{
		display: flex;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 5rpx;
			margin-right: 25rpx;
		}
		.content_txt{
			flex: 1;
			height: 160rpx;
			.content_txt_top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 27rpx;
				text{
					color: #888888;
					font-size: 28rpx;
				}
				.top_people{
					color: #222222;
					font-size: 30rpx;
				}
			}
			.content_txt_bottom{
				margin-bottom: 19rpx;
				text{
					color: #222222;
					font-size: 28rpx;
				}
			}
		}
	}
	&_button{
		display: flex;
		justify-content: flex-end;
		margin-top: 44rpx;
		.button_style{
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			border: 2rpx solid #ffb685;
			border-radius: 10rpx;
			margin-right: 30rpx;
			image{
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
			text{
				font-size: 28rpx;
				color: #ffb685;
			}
		}
		.button_style_other,.button_style_none{
			padding: 10rpx 20rpx;
			border: 2rpx solid #ffb685;
			border-radius: 10rpx;
			text{
				font-size: 28rpx;
				color: #ffb685;
			}
			.other_txt{
				font-size: 28rpx;
				color: #cccccc;
			}
		}
		.button_style_none{
			border: 2rpx solid #cccccc;
		}
	}
}


</style>
